<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/dev/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link href="/dev/plugins/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/daohang.css">
    <link rel="stylesheet" href="../css/gedanzhujiemian.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/comment.css">
    <!--    <link rel="stylesheet" href="../css/playerto.css">-->
    <style>
        .coller {
            background-color: #8f96ff;
        }

        .coller:hover {

            background-color: #b92c28;
        }

        #QPlayer {
            z-index: 200;
        }
    </style>
</head>
<body>
<div class="stars"></div>
<div id="app"></div>

<div class="nav-bot">
</div>
<div class="playerxiao"></div>

<!--    主题页面-&#45;&#45;左面-->
<div class="beijingzuo">
    <div class="tu" style="width: 750px;height: 294px">


    </div>
    <div class="gequliebiao" style="width: 200px;height: 40px;font-size: 25px;padding-left: 40px;padding-top: -20px">
        歌曲列表
    </div>
    <div class="biao" style="width: 750px;height: 500px">
        <!--        <div class="layuimini-container">-->
        <!--            <div class="layuimini-main">-->
        <!--                <fieldset class="table-search-fieldset" style="height: 50px">-->
        <!--                    <legend> </legend>-->
        <!--                    <form class="navbar-form navbar-right" role="search" style="margin-top: -5px; margin-right: 500px;" onclick="myform()">-->
        <!--                        <div class="input-group">-->
        <!--                            <input type="text" id="songTitle_input" class="form-control" placeholder="🔍音乐" value="" >-->
        <!--                            <span class="input-group-btn">-->
        <!--                                    <button style="height: 34px " id="searchButton" class="btn btn-default" type="button" >-->
        <!--                                        <span class="glyphicon glyphicon-search"></span>-->
        <!--                                    </button>-->
        <!--                                </span>-->
        <!--                        </div>-->
        <!--                    </form>-->
        <!--                </fieldset>-->

        <table class="layui-hide" id="demo" lay-filter="test">

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="play">播放</button>
                </div>
            </script>
            <script type="text/html" id="barDemo">
                <div class="lihover">
                    <button class="layui-icon layui-btn-sm layui-icon-play" lay-event="playi"></button>
                    <button class="layui-icon layui-icon-add-circle layui-btn-sm" lay-event="playon"></button>
                    <button class="layui-icon layui-icon-star layui-btn-sm" lay-event="playto"></button>
                </div>
            </script>


        </table>

        <!--            </div>-->
        <!--        </div>-->
    </div>
    <div style="width: 200px;height: 40px;font-size: 25px;padding-left: 40px;padding-top: -20px">评论界面</div>
    <!--    评论界面-->
   <div class="ping"></div>

</div>
<!--    主题页面-&#45;&#45;右面-->
<div class="beijingyou">
    <div class="gequliebiao" style="width: 200px;height: 40px;font-size: 25px;">
        其他歌单
    </div>
    <hr class="layui-border-orange">
    <div class="dan" style="width: 300px;height: 500px">

    </div>

</div>

<script src="../js/jquery.min.js"></script>
<script src="http://localhost:8088/dev/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="/dev/plugins/layui/layui.js"></script>
<script src="../js/biaoge.js"></script>
<script src="../js/beijng.js"></script>
<!--<script type="text/javascript" src="../js/jquery.flexText.js"></script>-->

<script>
    $(function () {
        $("#app").load('/dev/views/slx/nav.html');
        $('.ping').load('/dev/views/cxy/views/评论.html');

        $(".playerxiao").load('/dev/views/cxy/views/cemian.html');
    })
</script>

<script>
    // 在页面卸载前保存播放状态
    // window.onbeforeunload = function() {
    //     autoplay();
    // };
    //
    // // 页面加载完成后读取播放状态并恢复播放
    // window.onload = function() {
    //     onpause();
    // };
    // $("#songTitle_input").submit(){
    //     let val = input.value
    // }

    function myform() {

        let val = $('#songTitle_input').val()
        console.log(val)

        // var yinyue = $(".form-control").val();
        // console.log(yinyue);
    }
</script>
<script type="application/javascript">
    var a = GetRequest();


    var id = a['id'];


    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    $(function () {

        $.ajax({
            type: 'post',
            datatype: "json",
            url: 'http://localhost:8088/dev/gedan/pos',
            data: {"id": id},
            success: function (result) {

                if (result.code == 200) {
                    var arr = result.data
                    console.log(0)

                    let str = `<div class="ro">`;
                    for (let i = 0; i < arr.length; i++) {
                        str += `
        <div class="th">
            <div class="tupianju" style="margin-top: 30px;margin-left: 50px;width: 210px;height: 240px;border: 1px solid rgb(5, 5, 5);">
                <img class="im" decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}"
                 alt="信号好像不知道哪去了呢！！" style="margin-left: 5px;margin-top:5px;width: 200px;height: 230px;">
            </div>
            <div class="ca">
                <h3 class='te' style="margin-left: 300px;margin-top: -235px">${arr[i].title}</h3>

                <p class='textt' style="margin-left: 300px;margin-top: 10px;font-size: 20px;color: #2aabd2"><img class="im" decoding="async" src="http://localhost:8088/dev/views/cxy/img/gedan/${arr[i].image}" style="width: 40px;height: 40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${arr[i].massage}</p><br>
                <div class="coller layui-anim-scaleSpring" style="margin-left: 300px;margin-top: 10px; width: 50px;height: 23px; border: 1px solid rgb(5, 5, 5);padding-left: 5px;padding-top: -5px;border-radius:15%">
                <a href="http://localhost:8088/dev/views/cxy/bofang.html?songListId=${arr[i].id}" style="color: #0f0f0f;font-size: 18px;">播放</a>

                </div>
                <div class="coller layui-anim-scaleSpring " style="margin-left: 350px;margin-top: -22px; width: 18px;height: 23px; border: 1px solid rgb(5, 5, 5);padding-left: 3px;padding-top: -5px;border-radius:15%">
                <a href="#" style="font-size: 18px">+</a>
                </div>
                <div class="coller" style="margin-left: 400px;margin-top: -22px; width: 55px;height: 23px; border: 1px solid rgb(5, 5, 5);padding-left: 3px;padding-top: -5px;border-radius:15%">
                <a href="#" style="font-size: 18px;margin-left: 5px">收藏</a>
                </div>
                <div class="coller" style="margin-left: 480px;margin-top: -22px; width: 55px;height: 23px; border: 1px solid rgb(5, 5, 5);padding-left: 3px;padding-top: -5px;border-radius:15%">
                <a href="#" style="font-size: 18px;margin-left: 5px">下载</a>
                </div>
                <div class="coller" style="margin-left: 560px;margin-top: -22px; width: 55px;height: 23px; border: 1px solid rgb(5, 5, 5);padding-left: 3px;padding-top: -5px;border-radius:15%">
                <a href="#" style="font-size: 18px;margin-left: 5px">评论</a>
                </div>
                <div style="width: 320px;height: 60px;margin-left: 300px;margin-top: 20px; ">
                介绍：${arr[i].introduce}
                </div>
            </div>
        </div>
    `
                    }
                    str += `</div>`

                    $(".tu").html(str)
                }
            }
        })
    })



    $(function () {
        console.log(id)
        $.get(`http://localhost:8088/dev/gedan/selet`, function (result) {
            console.log(result.data)
            let ar = result.data

            load(ar)
        })

    })

    function load(ar) {
        let str = `<div class="ro">`;
        for (let i = 0; i < ar.length; i++) {
            if (i < 6) {


                str += `
            <div class="youtu">

            <img class="tutu" src="http://localhost:8088/dev/views/cxy/img/gedan/${ar[i].image}" style="height: 60px;width: 60px;margin-left: 10px">
            <i style="margin-left: 30px;margin-top: 20px;margin-bottom: -50px">${ar[i].massage}</i>
             <p class='text-success text-center' style="margin-left: 40px;margin-bottom: 20px;margin-top: -20px"><a href="http://localhost:8088/dev/views/cxy/views/gedanzhuye.html?id=${ar[i].id}">${ar[i].title}</a></p>
            <hr>
          </div>
    `
            }
        }
        str += `</div>`

        $(".dan").html(str)
    }
</script>

</body>
</html>